<template>
    <div>
        <bar text="商铺评级"></bar>
        <div class="content">
            <div class="titleBar" style="margin-bottom: 23px">
                <titles text="商铺评级" style="margin-top: 5px"></titles>
                <div style="display: flex;justify-content: center">
                    <div>
                        <el-select v-model="value" placeholder="综合坪效" @change="selectGet(value)">
                            <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                    <div style="margin-left: 10px">
                        <el-select v-model="value2" placeholder="今天" @change="selectGet2(value2)">
                            <el-option
                                    v-for="item in options2"
                                    :key="item.value2"
                                    :label="item.label"
                                    :value="item.value2">
                            </el-option>
                        </el-select>
                    </div>
                </div>
            </div>
            <div class="shopLevel" v-for="(item,index) in shopLevel" :key="index + '-only'"
                 @click="btnMap(item.fid,item.floor)">
                <div style="display: flex;justify-content: flex-start;">
                    <div class="icon" v-if="index == 0">
                        <img src="../../assets/imgs/home/top.png" style="width: 100%;height: 100%;" alt/>
                    </div>
                    <div class="icon" v-else-if="index == 1">
                        <img src="../../assets/imgs/home/mind.png" style="width: 100%;height: 100%;" alt/>
                    </div>
                    <div class="icon" v-else-if="index == 2">
                        <img src="../../assets/imgs/home/down.png" style="width: 100%;height: 100%;" alt/>
                    </div>
                    <div class="icon" v-else>
                        <p>{{index + 1}}</p>
                    </div>
                    <div class="shopInfo" style="display: flex;justify-content: flex-start">
                        <div class="shopIcon">
                            <img :src="item.pic_url"
                                 style="width: 100%;height: 100%;border-radius: 50%;" alt/>
                        </div>
                        <div style="margin-top: -10px;margin-left: 15px">
                            <div class="shopName" style="font-size:13px;text-align: left">{{item.name}}</div>
                            <div class="shopName" style="font-size:12px;display: flex;justify-content: flex-start">
                                <p style="margin-right: 5px">坪效：{{item.plateaueffect}}/m²</p>
                                <p>集客力：{{item.collectpower}}/m²</p>
                            </div>
                        </div>
                    </div>
                </div>

                <div>
                    <p style="font-size:12px;line-height: 26px; margin-top: -10px;">店铺评分</p>
                    <p style="font-size:11px;color: #E04F49">{{item.score}}</p>
                </div>
            </div>
        </div>
    </div>

</template>

<script>
    import bar from "../../components/topBar";
    import titles from "../../components/titleBar";

    export default {
        props: {},
        name: "shopGread",

        components: {
            bar,
            titles
        },
        data() {
            return {
                options: [{
                    value: '0',
                    label: '综合'
                }, {
                    value: '1',
                    label: '坪效'
                }, {
                    value: '2',
                    label: '集客力'
                }],
                options2: [{
                    value2: '0',
                    label: '今天'
                }, {
                    value2: '1',
                    label: '本月'
                }, {
                    value2: '2',
                    label: '本年'
                }],
                value: '',
                value2: '',
                shopLevel: [],
                priority: 1,
                time: 1
            };
        },
        computed: {},
        created() {
        },
        mounted() {
            this.getData()
        },
        // beforeUpdate(){
        //     this.getData()
        // },
        methods: {
            btnMap(fid, floor) {
                // alert(floor)
                this.$router.push({path: "/map", query: {type: 4, fid: fid, floor: floor}})
            },
            selectGet(value) {//这个vId也就是value值
                console.log(value);
                this.priority = value;
                this.$options.methods.getData.bind(this)();
            },
            selectGet2(value2) {//这个vId也就是value值
                console.log(value2);
                this.time = value2
                this.$options.methods.getData.bind(this)();
            },
            handleCommand(command) {
                // this.$message('click on item ' + command);
            },
            getData() {
                this.$api.get('market/store/ranklist?priority=' + this.priority + '&time=' + this.time, {}, response => {
                    if (response.status >= 200 && response.status < 300) {
                        console.log(response.data.data);
                        this.shopLevel = response.data.data
                    } else {
                        console.log(response.message);
                        //请求失败，response为失败信息
                    }
                });
            }

        }
    }
</script>

<style scoped lang="scss">
    /*.el-scrollbar {*/
    /*    > .el-scrollbar__bar {*/
    /*        opacity: 1 !important;*/
    /*    }*/
    /*}*/
    /deep/ .el-input__icon {
        line-height: 26px;
    }

    /deep/ .el-input--suffix .el-input__inner {
        width: 110px;
        height: 26px;
        font-size: 16px;
        line-height: 26px;
    }

    .content {
        padding: 10px 15px;
        box-sizing: border-box;
        /*background-color: #42b983;*/
        /*height: 500px;*/

        .titleBar {
            /*height: 58px;*/
            display: flex;
            justify-content: space-between;
            /*align-items: center;*/
        }

        .shopLevel {
            width: 345px;
            height: 64px;
            background: rgba(255, 255, 255, 1);
            box-shadow: 0px 1px 6px 0px rgba(228, 228, 230, 0.5);
            border-radius: 5px;
            display: flex;
            justify-content: space-between;
            padding: 23px 13px;
            box-sizing: border-box;
            margin-bottom: 10px;

            .icon {
                width: 25px;
                height: 20px;
            }

            .shopInfo {
                margin-left: 13px;

                .shopIcon {
                    width: 37px;
                    height: 37px;
                    border-radius: 50%;
                    margin-top: -10px;
                }

                .shopName {
                    font-size: 13px;
                    font-family: SourceHanSansCN-Regular, SourceHanSansCN;
                    font-weight: 400;
                    color: rgba(51, 51, 51, 1);
                    line-height: 20px;
                }
            }


        }
    }
</style>
